---
import { Icon } from "astro-icon/components";
import { profileConfig, commentConfig } from "@/config";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { formatDateToYYYYMMDD } from "@/utils/date-utils";
import { getCategoryUrl, getTagUrl } from "@/utils/url-utils";

export interface Props {
  published: Date;
  updated?: Date;
  category?: string;
  tags?: string[];
  hideUpdateDate?: boolean;
  hideTagsForMobile?: boolean;
  isHome?: boolean;
  className?: string;
  slug?: string;
  words?: number;
  minutes?: number;
  showWordCount?: boolean; // 是否显示字数统计，默认false显示标签
  customPath?: string;
}

const {
  published,
  updated,
  category,
  tags,
  hideUpdateDate,
  hideTagsForMobile,
  isHome,
  className = "",
  slug,
  words,
  minutes,
  showWordCount = false,
  customPath
} = Astro.props;

const path = customPath || (slug ? `/posts/${slug}` : '');
---

<div
  class:list={[
    "flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2",
    className,
  ]}
>
  <!-- publish date -->
  <div class="flex items-center">
    <div class="meta-icon">
      <Icon
        name="material-symbols:calendar-today-outline-rounded"
        class="text-xl"
      />
    </div>
    <span class="text-50 text-sm font-medium"
      >{formatDateToYYYYMMDD(published)}</span
    >
  </div>

  <!-- update date -->
  {
    !hideUpdateDate && updated && updated.getTime() !== published.getTime() && (
      <div class="flex items-center">
        <div class="meta-icon">
          <Icon
            name="material-symbols:edit-calendar-outline-rounded"
            class="text-xl"
          />
        </div>
        <span class="text-50 text-sm font-medium">
          {formatDateToYYYYMMDD(updated)}
        </span>
      </div>
    )
  }

  <!-- categories -->
  <div class="flex items-center">
    <div class="meta-icon">
      <Icon name="material-symbols:book-2-outline-rounded" class="text-xl" />
    </div>
    <div class="flex flex-row flex-nowrap items-center">
      <a
        href={getCategoryUrl(category || "")}
        aria-label={`View all posts in the ${category} category`}
        class="link-lg transition text-50 text-sm font-medium
                            hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap"
      >
        {category || i18n(I18nKey.uncategorized)}
      </a>
    </div>
  </div>

   <!-- word count and read time (only for post list) -->
   {
     showWordCount && words !== undefined && minutes !== undefined && (
       <>
         <!-- word count -->
         <div class="flex items-center">
           <div class="meta-icon">
             <Icon
               name="material-symbols:article-outline-rounded"
               class="text-xl"
             />
           </div>
           <div class="text-50 text-sm font-medium">
             {words}
             {" " + i18n(words === 1 ? I18nKey.wordCount : I18nKey.wordsCount)}
           </div>
         </div>
         
{/*          <!-- read time -->
         <div class="flex items-center">
           <div class="meta-icon">
             <Icon
               name="material-symbols:schedule-outline-rounded"
               class="text-xl"
             />
           </div>
           <div class="text-50 text-sm font-medium">
             {minutes}
             {" " +
               i18n(minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
           </div>
         </div> */}
       </>
     )
   }

   <!-- tags (only for post detail page) -->
   {
     !showWordCount && (
       <div class:list={["items-center", {"flex": !hideTagsForMobile, "hidden md:flex": hideTagsForMobile}]}>
         <div class="meta-icon">
           <Icon name="material-symbols:tag-rounded" class="text-xl" />
         </div>
         <div class="flex flex-row flex-nowrap items-center">
           {(tags && tags.length > 0) && tags.map((tag, i) => (
             <div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
             <a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
                class="link-lg transition text-50 text-sm font-medium
                             hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
               {tag.trim()}
             </a>
           ))}
           {!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
         </div>
       </div>
     )
   }

  <!-- Twikoo访问量统计（首页不显示，且文章访问量统计启用时显示） -->
  {
    !isHome &&
      commentConfig.type === 'twikoo' &&
      commentConfig.twikoo?.visitorCount &&
      slug && (
        <div class="flex items-center">
          <div class="meta-icon">
            <Icon
              name="material-symbols:visibility-outline-rounded"
              class="text-xl"
            />
          </div>
          <span class="text-50 text-sm font-medium mr-1">
            {i18n(I18nKey.pageViews)}
          </span>
          <span class="text-50 text-sm font-medium" id="twikoo_visitors">
            {i18n(I18nKey.pageViewsLoading)}
          </span>
        </div>
      )
  }
  <!-- Waline访问量统计（首页不显示、仅type为waline时显示） -->
  {
    !isHome &&
      commentConfig.type === 'waline' &&
      commentConfig.waline?.visitorCount &&
      slug && (
        <div class="flex items-center">
          <div class="meta-icon">
            <Icon name="material-symbols:visibility-outline-rounded" class="text-xl" />
          </div>
          <span class="text-50 text-sm font-medium mr-1">
            {i18n(I18nKey.pageViews)}
          </span>
          <span class="text-50 text-sm font-medium waline-pageview-count" data-path={path}>{i18n(I18nKey.pageViewsLoading)}</span>
        </div>
      )
  }
</div>
